<template>
    <div class="content flex-col">
        <div class="content_nav">
            <a-tabs v-model="activeName" @change="getList">
                <a-tab-pane v-for="item in categoryList" :key="item.index" :tab="item.title">
                </a-tab-pane>
                <template #tabBarExtraContent>
                <div class="content_buttons">
                    <a-button type="primary" @click="submitModel = 'add'; dialogCategoryVisible = true">
                        <a-icon type="plus" />
                        新增
                    </a-button>
                </div>
                </template>
            </a-tabs>
        </div>
        <div class="content_list category-table">
            <el-table
                    :data="tableData"
                    row-class-name="category-table-tr"
                    style="width: 100%">
                <el-table-column
                        prop="categoryKey"
                        label="模块名">
                </el-table-column>
                <el-table-column
                        prop="categoryValue"
                        label="模块值">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" @click="handleUpdate(scope.row)" type="text">编辑</el-button>
                        <el-button icon="el-icon-delete"
                                   @click="handleDelete(scope.row)"
                                   type="text" style="color: #ff0000">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="content_floor">
            <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageChange"
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
        </div>

        <el-dialog :title="submitModel === 'add'? '一 新增 一': '一 修改 一'"
                   :visible.sync="dialogCategoryVisible"
                   width="400px"
                   center>
            <el-form label-position="left" label-width="120px"
                     :model="formCategory"
                     :rules="formCategoryRules" ref="formCategory"
            >
                <el-form-item label="模块名:" prop="categoryKey">
                    <el-input v-model="formCategory.categoryKey"
                              placeholder="请输入分类名称"/>
                </el-form-item>
                <el-form-item label="模块值:" prop="categoryValue">
                    <el-input-number v-model="formCategory.categoryValue"
                                     controls-position="right"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="dialogCategoryVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getList, addObj, delObj, updateObj } from '@/api/category'
    import { getUserAuthority } from "@/util/auth";
    export default {
        name: "category",
        data() {
            return {
                categoryList: [
                    // {title: '大屏', index: 'Visual'},
                    {title: '2D', index: 'TwoD'},
                    {title: '3D', index: 'ThreeD'},
                    {title: 'Earth', index: 'Earth'},
                    {title: 'BIM', index: 'Bim'},
                    {title: 'Workflow', index: 'Workflow'},
                    {title: 'App', index: 'App'},
                    {title: '组织', index: 'Org'},
                ],
                submitModel: 'add',
                page: {
                    total: 0,
                    size: 10,
                    current: 1
                },
                activeName: 'App',
                dialogCategoryVisible: false,
                formCategory: {
                    id: '',
                    categoryKey: '',
                    categoryValue: 0
                },
                formCategoryRules: {
                    categoryKey: [
                        { required: true, message: '请输入模块名', trigger: 'blur' }
                    ],
                    categoryValue: [
                        { required: true, message: '请输入模块值', trigger: 'blur' }
                    ],
                },
                tableData: []
            }
        },
        methods: {
            getList(key) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在加载中，请稍后',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let {current, size} = this.page
                let VisualType = key;
                getList({
                    current,
                    size,
                    VisualType
                }).then(res => {
                    loading.close();
                    if(res.data.success){
                        let data = res.data.data;
                        this.page.total = data.total;
                        this.page.size = data.size;
                        this.tableData = data.records;
                    }
                })
            },
            pageSizeChange(value) {
                this.page.size = value;
                this.getList(this.activeName);
            },
            pageChange(value) {
                this.page.current = value;
                this.getList(this.activeName);
            },
            handleSubmit() {
                this.$refs.formCategory.validate((valid) => {
                    if (valid) {
                        this.dialogCategoryVisible = false
                        let VisualType = this.activeName;
                        let {categoryKey, categoryValue, id} = this.formCategory;

                        let row = {
                            ID: id,
                            categoryKey,
                            categoryValue: categoryValue.toString(),
                            VisualType
                        }
                        if (this.submitModel === 'add'){
                            delete row.ID
                            addObj(row).then((res) => {
                                if(res.data.success){
                                    this.$message.success('新增成功');
                                    this.getList(this.activeName);
                                } else {
                                    this.$message.error('新增失败!');
                                }
                            })
                        }
                        else if (this.submitModel === 'update') {
                            updateObj(row).then((res) => {
                                if(res.data.success){
                                    this.$message.success('修改成功');
                                    this.getList(this.activeName);
                                } else {
                                    this.$message.error('修改失败!');
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            handleUpdate(row) {
                this.submitModel = 'update'
                let {categoryKey, categoryValue, id} = row;
                this.formCategory = {
                    categoryKey, categoryValue, id
                };
                this.dialogCategoryVisible = true;
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let VisualType = this.activeName;
                    let {id} = row;

                    delObj({
                        ID :id,
                        VisualType
                    }).then((res) => {
                        if(res.data.success){
                            this.$message.success('删除成功');
                            this.getList(this.activeName);
                        } else {
                            this.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message.error('删除失败!');
                });
            },
        },
        created() {
            let userAuth = getUserAuthority()
            let tenantId = userAuth["tenantId"];
            if(tenantId !== '000000'){
                this.categoryList = [
                    // {title: '大屏', index: 'Visual'},
                    {title: '2D', index: 'TwoD'},
                    {title: '3D', index: 'ThreeD'},
                    {title: 'Earth', index: 'Earth'},
                    // {title: 'BIM', index: 'Bim'},
                    // {title: 'Workflow', index: 'Workflow'},
                    {title: 'App', index: 'App'},
                    {title: '组织', index: 'Org'},
                ]
            }
            this.getList(this.activeName);
        }
    }
</script>

<style scoped>
    .category-button{
        width: 150px;
        height: 40px;
        background: transparent;
        flex: 0 0 150px;
        justify-content: flex-end;
        padding-left: 20px;
    }
</style>
